<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 所谓生成小li，就是往list数组中添加一个元素 -->
    <!-- 按钮不方便操作，在生成的过程中，会不断往下移，所以放上面来了 -->
    <button @click="generate">生成</button>
    <ul>
      <li v-for="v, i of list" :key="v">
        <span>{{ v }}</span>
        <button @click="delByIndex(i)">根据索引（下标）删除</button>
        <button @click="delByFilter(v)">用过滤删除</button>
        <button @click="delByLowBByIndex(i)">用笨办法删除（index）</button>
        <button @click="delByLowBByValue(v)">用笨办法删除（value）</button>
      </li>
    </ul>
  </div>
  
  <script src="vue.js"></script>
  <script>

    // 可以用一个立即执行函数，封闭一个作用域
    (function () {
      // 生成一个 [min, max] 之间的整数 
      function randomInt(min, max) {
        // 1. Math.random() => [0,1)
        // 2. Math.random() * max => [0, max)
        // 3. Math.random() * (max + 1) => [0, max + 1)
        // 4. Math.floor(第3步) => [0, max]
        // 5. 让第4步的结果 + min => [min, max + min]
        // 6. 第5步不行，要在随机生成的时候，就在这个范围中
        // ----------------------------------

        // 假设 min 是 10，max 是 20
        // 7. Math.random() * (max - min) => [0,10)
        // 8. 第7步的结果 + min => [10, 20)
        // 9. 所以，基于第7步，Math.random() * (max - min + 1) => [0, 11)
        // 10. 第9步的结果 + min => [10, 21)
        // 11. 在对第10步的结果 向下取整 => [10, 20]

        return Math.floor(Math.random() * (max - min + 1) + min)
      }
      // 扩展内置对象 Math
      Math.randomInt = randomInt

      // const num = randomInt(10, 20)
      // console.log(num)
    })();

   


    new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3, 4, 5]
      },
      methods: {
        generate() {

          // [ 表示能取到，) 表示取不到，无限接近
          // [0~1)，能取到0，取不到1，无限接近于1
          
          // 1. JS有一个随机数生成的方法 Math.random()，[0~1)

          // Math.random() * 20 => 0~20 => 有小数点
          // 取整：Math.floor 向下取整、Math.ceil 向上取整、parseInt 取整、Math.round 四舍五入

          // floor    => [0 ~ 19]
          // ceil     => [0 ~ 20]
          // parseInt => [0 ~ 19]
          // round    => [0 ~ 20]

          // 由于 Math.random() 方法 取 0 概率极低，基本可以忽略，
          // 所以，我们干脆就认为 Math.random() 取的就是 (0~1)
          // 注意：这里只是让算法更加公平，其实 Math.random() 是有可能取到 0 的
          
          // floor    => [0 ~ 19]
          // ceil     => [1 ~ 20]
          // parseInt => [0 ~ 19]
          // round    => [0 ~ 20]

          // floor 和 parseInt 这个方法其实用谁都一样，用 floor 可能就是一个习惯问题，可能逻辑更好理解

          // round 的概率不公平
          // 0  => [0~0.5)
          // 1  => [0.5~1.5)
          // 19 => [18.5~19.5)
          // 20 => [19.5~20]

          // Math.random() * 21 => [0~21)
          // Math.floor(Math.random() * 21) => [0~20]

          const num = Math.floor(Math.random() * 21)
          this.list.push(num)

          // 能不能封装一个函数，专门用来生成一个范围区间的随机数，
          // 比如：randomInt(min, max)，生成一个[min, max]之间的随机数

        },
        // 对数组删除常见的有两种方式：
        // 1. 根据索引（下标）删除 => splice（变异方法，不要重新赋值）
        // 2. 通过过滤删除 => filter（非变异方法，需要重新赋值覆盖原数组变量）
        // 还有一个lowb方法：
        // 1. 搞一个新数组，然后将需要保留的元素，一个个往新数组中添加
        delByIndex(delIndex) {
          this.list.splice(delIndex, 1)
        },
        delByFilter(delValue) {
          this.list = this.list.filter(v => v !== delValue)
        },
        // LowB：笨办法
        delByLowBByIndex(delIndex) {
          const newArr = []
          // for (let i = 0; i < this.list.length; i ++)
          this.list.forEach((v, i) => {
            // 如果 i !== delIndex，说明 v 不是想要删除的元素
            if (i !== delIndex) {
              newArr.push(v)
            }
          })
          this.list = newArr
        },
        delByLowBByValue(delValue) {
          // 这种方式，要保证数组中不存在重复的元素，
          // 因为如果存在重复的元素，所有重复的都会被过滤掉
          const newArr = []
          this.list.forEach(v => {
            // 如果 v !== delValue，说明 v 不是想要删除的元素
            if (v !== delValue) {
              newArr.push(v)
            }
          })
          this.list = newArr
        }
      }
    })
  </script>
</body>
</html>